<template>
  <KView class="imgs-upload">
    <template v-if="disabled">
      <KView v-for="(picData,index) in picList" :key="picData.id" class="imgs-upload-div" :class="{'first-row':index<rowNum}"
        :style="imgUploadItemStyle">
        <imgs-upload-item disabled v-model="picData.url" :preview-src-list="value">
        </imgs-upload-item>
      </KView>
    </template>

    <template v-else>
      <KView v-for="(picData,index) in picList" :key="picData.id" class="imgs-upload-div" :class="{'first-row':index<rowNum}"
        :style="imgUploadItemStyle">
        <imgs-upload-item v-model="picData.url" :prefix-name="prefixName" :preview-src-list="value" :loading.sync="picData.loading"
          @upload-success="uploadSuccess" @remove="removeSuccess(picData)">
        </imgs-upload-item>
      </KView>
    </template>

    <template v-if="surplusCount!==0">
      <KView v-for="num in surplusCount" :key="`num_${num}`" :style="imgUploadItemStyle"></KView>
    </template>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import ImgsUploadItem from './imgsUploadItem';

  export default {
    props: {
      value: {
        type: Array,
        required: true
      },
      limit: {
        type: Number,
        default: 1
      },
      width: {
        type: Number,
        default: 220
      },
      height: {
        type: Number,
        default: 220
      },
      totalWidth: {
        type: Number,
        default: 690
      },
      prefixName: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },

    computed: {
      imgUploadItemStyle() {
        let width = this.width;
        let height = this.height;
        return {
          width: SystemUtil.formatPx(width),
          height: SystemUtil.formatPx(height)
        };
      },
      rowNum() {
        let width = this.width;
        let count = this.totalWidth / width;
        count = SystemUtil.floorValue(count);
        return count;
      },
      surplusCount() {
        let picList = this.picList;
        let count = picList.length % this.rowNum;
        if (count === 0) {
          return 0;
        }
        return this.rowNum - count;
      }
    },

    data() {
      return {
        picList: this.getPicList()
      };
    },

    methods: {
      getPicList() {
        let value = this.value;
        let picList = [];
        for (let i = 0; i < value.length; i++) {
          let url = value[i];
          picList.push({
            id: SystemUtil.getId(),
            url: url,
            loading: false
          });
        }

        if (!this.disabled) {
          if (picList.length < this.limit) {
            picList.push({
              id: SystemUtil.getId(),
              url: '',
              loading: false
            });
          }
        }

        return picList;
      },

      uploadSuccess(url) {
        let picList = this.picList;
        if (picList.length < this.limit) {
          picList.push({
            id: SystemUtil.getId(),
            url: '',
            loading: false
          });
        }
        this.imgUrlChange();
      },

      removeSuccess(picData) {
        let picList = this.picList;
        let index = picList.indexOf(picData);
        if (index === -1) {
          return;
        }

        picList.splice(index, 1);
        let obj = picList[picList.length - 1];
        if (obj.url !== '') {
          picList.push({
            id: SystemUtil.getId(),
            url: '',
            loading: false
          });
        }

        this.imgUrlChange();
      },

      imgUrlChange() {
        let picList = this.picList;
        let urls = [];
        for (let i = 0; i < picList.length; i++) {
          const pic = picList[i];
          let url = pic.url;
          if (url !== '') {
            urls.push(url);
          }
        }
        this.$emit('input', urls);
        this.$emit('change', urls);
      },

      checkLoading() {
        let picList = this.picList;
        for (let i = 0; i < picList.length; i++) {
          const obj = picList[i];
          if (obj.loading) {
            return true;
          }
        }
        return false;
      }
    },

    components: {
      ImgsUploadItem
    }
  };

</script>

<style lang="scss">
  .imgs-upload {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .imgs-upload-div {
      margin-top: formatPx(10);

      &.first-row {
        margin-top: 0;
      }
    }
  }

</style>
